<template>
	<view class="job_details" v-if="Object.keys(detailsList).length > 0">
		<!-- <jhj-card title="项目信息" :class="{ margintop: tabs.length>0}">
			<jhj-card-item leftText="项目编号：" :rightText="biddingDetail.project_code"></jhj-card-item>
			<jhj-card-item leftText="项目名称：" :rightText="biddingDetail.project_name"></jhj-card-item>
		</jhj-card>
		<jhj-card title="开标信息">
			<jhj-card-item leftText="开标时间：" :rightText="biddingDetail.open_bid_date"></jhj-card-item>
			<jhj-card-item leftText="开标地址：" :rightText="biddingDetail.address"></jhj-card-item>
		</jhj-card>
		<jhj-card title="中标信息">
			<rich-text :nodes="biddingDetail.html"></rich-text>
		</jhj-card>
		<jhj-card title="联系方式">
			<jhj-card-item leftText="联系人：" :rightText="biddingDetail.contacts"></jhj-card-item>
			<jhj-card-item leftText="电话：" :rightText="biddingDetail.mobile"></jhj-card-item>
		</jhj-card>
		<view class="detail-card">
			<view class="card-title">
				中标文件
			</view>
			<view class="card-content">
				<view class="card-content-row" v-for="(item,index) in biddingDetail.attachment">
					<text @click="openDocument(item)">{{item.name}}</text>
				</view>
			</view>
		</view> -->
		<view class="title">
			<text style="font-size: 36rpx;padding: 0 70rpx;text-align: center;">{{detailsList.bidding_name}}</text>
			<text style="font-size: 28rpx;color: #999;margin-top: 10rpx;">发布时间：{{detailsList.win_bid_date}}</text>
		</view>
		<view class="message">
			<view class="subtitle">中标信息</view>
			<!-- <view><text>招标企业：</text><text>{{detailsList.company_id_name}}</text></view> -->
			<view style="display: flex;">
				<text style="min-width: 140rpx;">招标企业：</text>
				<view><text>{{detailsList.company_id_name}}</text></view>
			</view>
			<view><text>项目名称：</text><text>{{detailsList.project_name}}</text></view>
			<view><text>中标单位：</text><text>{{detailsList.process_id_company_name}}</text></view>
			<view style="display: flex;">
				<text style="min-width: 140rpx;">中标内容：</text>
				<view v-if="detailsList.html!=''" v-html="detailsList.html"></view>
				<view v-else>暂无</view>
			</view>
		</view>
		<view class="message">
			<view class="subtitle" style="margin-top: 40rpx;">中标文件</view>
			<view style="display: flex;">
				<view>附件：</view>
				<view v-for="item in detailsList.attachment" :key="item">
					<view @click="openDocument(item)" class="open">{{item.name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import JhjCard from '@/components/jhj-card/jhj-card.vue'
	import JhjCardItem from '@/components/jhj-card/jhj-card-item.vue'

	import {
		getBiddingDetails
	} from '@/static/js/api/bidding.js'

	export default {
		components: {
			JhjCard,
			JhjCardItem,
		},
		onLoad(option) {
			// this.biddingDetail = JSON.parse(option.val)
			this.id = JSON.parse(option.id)
			this.getdata()
		},

		data() {
			return {
				biddingDetail: "",
				id: null,
				detailsList: []
			}
		},
		methods: {
			getdata() {
				getBiddingDetails(this.id).then(res => {
					console.log(res);
					this.detailsList = res.data[2].data[0]
					console.log(this.detailsList);
				})
			},
			openDocument(item) {
				wx.downloadFile({
					url: item.url,
					success: function(res) {
						// console.log(res);
						const tempFilePath = res.tempFilePath;
						// 保存文件
						wx.saveFile({
							tempFilePath,
							success: function(res) {
								const savedFilePath = res.savedFilePath;
								// 打开文件
								wx.openDocument({
									filePath: savedFilePath,
									success: function(res) {
										console.log('打开文档成功')
									},
								});
							},
							fail: function(err) {
								console.log('保存失败：', err)
							}
						});
					},
					fail: function(err) {
						console.log('下载失败：', err);
					},
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.title {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-bottom: 1px solid #2d71b3;
		padding: 20rpx 0 10rpx 0;
	}

	.message {
		padding: 0 40rpx;

		view {
			line-height: 70rpx;
		}
	}

	.subtitle {
		font-size: 34rpx;
		margin-top: 20rpx;
		color: rgba(0, 0, 0, 0.7);
		font-weight: bold;
		position: relative;
	}
	.subtitle:before{
		content: '';
		position: absolute;
		left: -20rpx;
		top: 50%;
		transform: translateY(-50%);
		height: 50%;
		width: 6rpx;
		background: #2d71b3;
		
		// content: '';
		// position: absolute;
		// left: -20rpx;
		// top: 50%;
		// height: 50%;
		// width: 6rpx;
		// transform: translateY(-50%);
	}
	
	.open{
		color: #2d71b3;
	}

	.job_details {
		// background: #F4F5F9;
	}

	.detail-card {
		padding: 30rpx;
		background: #fff;
		// margin-bottom: 20rpx;
		margin-top: 20rpx;

		.card-title {
			font-size: 36rpx;
			font-weight: 500;
			color: #333333;
			margin-bottom: 24rpx;
		}

		.card-content {
			.card-content-row {
				display: flex;
				font-size: 28rpx;
				font-weight: 500;
				color: #666666;
				line-height: 40rpx;
				margin-bottom: 6rpx;

				.row-left {}

				.row-right {
					flex: 1;
				}

				text {
					font-size: 28rpx;
					font-weight: 500;
					color: #B8212B;
				}
			}
		}
	}
</style>
